<template>
	<view class="content with-tabbar">
		<div class="fontS48 pl-30 pr-30 lh-72 font-weight bg-f7 pt-42 pb-30 por-fixed">一分钟创建在线简历</div>
		<div class="h-124 bg-f7 w-p100"></div>
		<scroll-view class=" pb-18 pl-30 pr-30 bg-fff" style="white-space: normal;" scroll-y>
			<div class=" ">
				<u-form labelPosition="left" :model="postForm" :rules="rules" ref="uForm" labelWidth="100">
					<u-form-item label="头像" borderBottom>
						<div class=" ml-auto flex align-center">
							<button class="avator flex-center mr-20" open-type="chooseAvatar"
								@chooseavatar="getChooseAvatar">
								<image class="img-60"
									:src="postForm.headImg ? baseUrl + postForm.headImg : 'https://apitest.yijiangongxiang.com/template/nan.png'"
									mode="aspectFill" />
							</button>
							<div class="iconfont icon-youjiantou color-6D ml-auto"></div>

						</div>
					</u-form-item>
					<u-form-item borderBottom label="姓名" prop="name">
						<u-input type="text" v-model="postForm.name" placeholder="请输入真实姓名" border="none"></u-input>
					</u-form-item>
					<u-form-item label="性别" prop="sex" borderBottom @click="showSex = true;">
						<u--input v-model="sexList[0][sexValue].label" disabled disabledColor=" #ffffff"
							placeholder="请选择性别" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>

					</u-form-item>
					<u-picker :show="showSex" :columns="sexList" keyName="label" confirmColor="#37AF71"
						:defaultIndex="[sexValue]" title="请选择性别" :closeOnClickOverlay="true"
						@change="change($event, 'sex')" @confirm="confirm($event, 'sex')" @close="showSex = false"
						@cancel="showSex = false"></u-picker>
					<picker mode="date" @change="change($event, 'birth')" :range="sexList">
						<view class=" resume-box lh-70 flex align-center pb-15 bor-b pt-15">
							<view class="form-label resume-title  color-3"> 出生年月 </view>
							<view class="form-cnt">
								<div class="radio" :class="postForm.birthDate ? '' : 'color-placeHolder '">{{
									postForm.birthDate || '请选择出生年月' }}</div>
							</view>
							<div class="ml-auto iconfont icon-youjiantou"></div>
						</view>
					</picker>
					<u-form-item label="最高学历" prop="highEducation" borderBottom @click="showEdu = true;">
						<u--input v-model="eduList[0][eduValue].label" disabled disabledColor=" #ffffff"
							placeholder="请选择学历" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>

					</u-form-item>
					<u-picker :show="showEdu" :columns="eduList" keyName="label" :defaultIndex="[eduValue]"
						confirmColor="#37AF71" title="请选择学历" :closeOnClickOverlay="true" @change="change($event, 'edu')"
						@confirm="confirm($event, 'edu')" @close="showEdu = false" @cancel="showEdu = false"></u-picker>
					<picker mode="date" @change="change($event, 'job')" :range="sexList">
						<view class=" resume-box lh-70 flex align-center pb-15 bor-b pt-15">
							<view class="form-label resume-title  color-3"> 参加工作时间 </view>
							<view class="form-cnt">
								<div class="radio" :class="postForm.jobDate ? '' : 'color-placeHolder '">{{
									postForm.jobDate || '请选择参加工作时间' }}</div>
							</view>
							<div class="ml-auto iconfont icon-youjiantou"></div>
						</view>
					</picker>
					<u-form-item label="工作经验" prop="experienceRequire" borderBottom @click="showExperience = true;">
						<u--input v-model="experienceList[0][experienceValue].label" disabled disabledColor=" #ffffff"
							placeholder="请选择工作经验" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>

					</u-form-item>
					<u-picker :show="showExperience" :columns="experienceList" keyName="label"
						:defaultIndex="[experienceValue]" confirmColor="#37AF71" title="请选择工作经验"
						:closeOnClickOverlay="true" @change="change($event, 'experience')"
						@confirm="confirm($event, 'experience')" @close="showExperience = false"
						@cancel="showExperience = false"></u-picker>
					<u-form-item label="求职状态" prop="experienceRequire" borderBottom @click="showJobSeek = true;">
						<u--input v-model="jobSeekList[0][jobSeekValue].label" disabled disabledColor=" #ffffff"
							placeholder="请选择求职状态" border="none"></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>

					</u-form-item>
					<u-picker :show="showJobSeek" :columns="jobSeekList" keyName="label" :defaultIndex="[jobSeekValue]"
						confirmColor="#37AF71" title="请选择求职状态" closeOnClickOverlay="true"
						@change="change($event, 'jobSeek')" @confirm="confirm($event, 'jobSeek')"
						@close="showJobSeek = false" @cancel="showJobSeek = false"></u-picker>
					<u-form-item borderBottom label="手机号" prop="phone">
						<u-input type="number" maxLength="11" v-model="postForm.phone" placeholder="请输入手机号"
							border="none"></u-input>
					</u-form-item>
					<u-form-item borderBottom label="微信" prop="wx">
						<u-input type="text" v-model="postForm.wx" placeholder="请输入微信号" border="none"></u-input>
					</u-form-item>
					<u-form-item borderBottom label="邮箱" prop="email">
						<u-input type="text" v-model="postForm.email" placeholder="请输入邮箱" border="none"></u-input>
					</u-form-item>
					<div class="lh-70 flex resume-box">
						<div class="resume-title color-3 pt-15">现居地</div>
						<div class="fontS28 color-0d0 resume-input">
							<picker mode="region" @change="change($event, 'region')">
								<view class=" resume-box lh-70 flex align-center pb-15 bor-b  pt-15">

									<view class="form-cnt1 ">
										<div class="radio" :class="value ? '' : 'color-placeHolder '">{{
											value || '请选择省市县' }}
										</div>
									</view>
									<div class="ml-auto iconfont icon-youjiantou"></div>
								</view>
							</picker>
							<div class="lh-70 flex align-center pb-15 resume-box pt-15">
								<div class=" color-0d0 " style="width: 100%;">
									<input border="none" type="text" placeholder="请输入详细地址"
										placeholder-style="color:#b9bcc5;" v-model="postForm.address"
										style="width: 100%; font-size: 15px;"></input>
								</div>
							</div>
						</div>
					</div>
				</u-form>
			</div>
		</scroll-view>
		<div class="bottom">
			<div v-if="prePage === 'edit'" class="submitBtn fontS26" @click="toNext">保存</div>
			<div v-else class="submitBtn fontS26" @click="toNext">下一步
			</div>

		</div>



	</view>
</template>

<script>
const ossUploadFile = require("@/utils/ossupload/upload").ossUploadFile;

import { resume, onLineResume, editPersonalInfo } from '@/api/resume'
const api = require("@/api/api.js").api;
export default {
	computed: {
		userInfo() {
			console.log(this.$store.getters.userInfo)
			return this.$store.getters.userInfo || {};
		},
	},
	data() {
		return {
			baseUrl: getApp().globalData.baseUrl,
			scrollHeight: 300,
			postForm: {
				address: '',
				provinceCode: '',
				birthDate: '',
				email: '',
				experienceRequire: null,
				headImg: '',
				highEducation: null,
				jobDate: '',
				jobSeekStatus: null,
				name: '',
				phone: '',
				sex: null,
				wx: '',
				areaCode: '',
				cityCode: '',
				provinceCode: '',
				addressCity: ''
			},
			rules: {
				name: [{
					required: true,
					message: '请输入真实姓名',
					trigger: ['blur', 'change'],
				},],
				sex: [{
					type: 'number',
					required: true,
					message: '请选择性别',
					trigger: ['blur', 'change'],
				},],
				highEducation: [{
					type: 'number',
					required: true,
					message: '请选择最高学历',
					trigger: ['blur', 'change'],
				},],
				jobSeekStatus: [{
					type: 'number',
					required: true,
					message: '请选择求职状态',
					trigger: ['blur', 'change'],
				},],
				experienceRequire: [{
					type: 'number',
					required: true,
					message: '请选择工作经验',
					trigger: ['blur', 'change'],
				},],
				phone: [{
					required: true,
					message: '请输入手机号',
					trigger: ['blur', 'change'],
				},],
				wx: [{
					required: true,
					message: '请输入微信号',
					trigger: ['blur', 'change'],
				},],
				email: [{
					required: true,
					message: '请输入邮箱',
					trigger: ['blur', 'change'],
				},],
			},
			value: '',
			sexValue: null,
			sexList: [getApp().globalData.sexList],
			showSex: false,
			eduList: [getApp().globalData.education],
			showEdu: false,
			eduValue: null,
			experienceList: [getApp().globalData.experience],
			showExperience: false,
			experienceValue: null,
			jobSeekList: [getApp().globalData.jobSeek],
			jobSeekValue: null,
			showJobSeek: false,
			regionList: [],
			postStatus: false,
			prePage: null
		}
	},
	async onLoad(options) {
		console.log('uView版本:', uni.$u?.config?.v);
		if (options.page) {
			this.prePage = options.page
			this.scrollHeight = Number(uni.getSystemInfoSync().screenHeight - uni.upx2px(270))
			await this.getonLineResume()

		} else {
			this.scrollHeight = Number(uni.getSystemInfoSync().screenHeight - uni.upx2px(420))
		}
		if (uni.getStorageSync('creat1Info')) {
			this.postForm = JSON.parse(uni.getStorageSync('creat1Info'))
			this.eduValue = this.eduList[0].findIndex(item => { return item.value === this.postForm.highEducation })
			this.sexValue = this.postForm.sex
			this.experienceValue = this.experienceList[0].findIndex(item => { return item.value === this.postForm.experienceRequire })
			this.jobSeekValue = this.jobSeekList[0].findIndex(item => { return item.value === this.postForm.jobSeekStatus })
			this.value = this.postForm.addressCity

		}

		console.log(this.sexList)
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules)
	},
	methods: {
		getChooseAvatar(e) {
			console.log(e)

			this.uploadImages(e.detail.avatarUrl)

		},
		async uploadImages(path, type) {
			let data = { type: 11 };
			data.filePath = path
			ossUploadFile.ossUploadFile(data, async (res) => {
				this.postForm.headImg = res.fileName

			}, async (error) => {
				console.log(error)

			})
		},
		async getonLineResume() {
			const { data } = await onLineResume()
			this.postForm = data

			this.eduValue = this.eduList[0].findIndex(item => { return item.value === data.highEducation })
			this.sexValue = data.sex
			this.experienceValue = this.experienceList[0].findIndex(item => { return item.value === data.experienceRequire })
			this.jobSeekValue = this.jobSeekList[0].findIndex(item => { return item.value === data.jobSeekStatus })
			this.value = data.provinceName + data.cityName + data.areaName

		},
		async getRegion() {
			const { data } = await api.region.regionList()
			this.regionList = data
		},
		confirm(e, type) {
			console.log(e)
			if (type === 'sex' && e.value[0] === undefined) {
				this.postForm.sex = 0
				this.sexValue = 0
			}
			if (type === 'edu' && e.value[0] === undefined) {
				this.postForm.highEducation = this.eduList[0][0].value
				this.eduValue = 0

			}
			if (type === 'experience' && e.value[0] === undefined) {
				this.postForm.experienceRequire = this.experienceList[0][0].value
				this.experienceValue = 0

			}
			if (type === 'jobSeek' && e.value[0] === undefined) {
				this.postForm.jobSeekStatus = this.jobSeekList[0][0].value
				this.jobSeekValue = 0
			}
			this.showSex = false;
			this.showEdu = false;
			this.showExperience = false;
			this.showJobSeek = false;

		},
		change(e, type) {
			if (type === 'sex') {
				this.postForm.sex = e.value[0].value
				this.postForm.sexName = e.value[0].label
				this.sexValue = e.index
			}
			if (type === 'edu') {
				this.postForm.highEducation = e.value[0].value
				this.postForm.highEducationName = e.value[0].label
				this.eduValue = e.index

			}
			if (type === 'birth') this.postForm.birthDate = e.detail.value
			if (type === 'job') this.postForm.jobDate = e.detail.value
			if (type === 'experience') {
				this.postForm.experienceRequire = e.value[0].value
				this.postForm.experienceRequireName = e.value[0].label
				this.experienceValue = e.index

			}
			if (type === 'jobSeek') {
				this.postForm.jobSeekStatus = e.value[0].value
				this.postForm.jobSeekName = e.value[0].label
				this.jobSeekValue = e.index
			}
			if (type === 'region') {
				console.log(e)
				this.value = e.detail.value.join('')
				this.postForm.provinceCode = e.detail.code[0]
				this.postForm.cityCode = e.detail.code[1]
				this.postForm.areaCode = e.detail.code[2]

			}
		},
		async toNext() {

			this.postForm.addressCity = this.value
			this.$refs.uForm.validate().then(async res => {
				console.log('校验成功')
				if (!this.postForm.birthDate) {
					uni.showToast({ title: '请先选择出生日期', icon: 'none' });
					return false;
				}
				if (!this.postForm.jobDate) {
					uni.showToast({ title: '请先选择参加工作日期', icon: 'none' });
					return false;
				}
				if (!this.postForm.provinceCode || !this.postForm.cityCode || !this.postForm.areaCode) {
					uni.showToast({ title: '请先选择省市县', icon: 'none' });
					return false;
				}
				if (!this.postForm.address) {
					uni.showToast({ title: '请先输入详细地址', icon: 'none' });
					return false;
				}
				if (this.prePage === 'edit') {
					const { code, data } = await editPersonalInfo(this.postForm)
					uni.navigateBack({
						delta: 1
					})
				} else {
					uni.setStorageSync('creat1Info', JSON.stringify(this.postForm))
					uni.navigateTo({
						url: '/pages/resume/creat2',
					});

				}


			}).catch(errors => {
				console.log('校验失败')
			})

		},


	}
}
</script>

<style lang="less" scoped>
.content {
	display: flex;
	flex-direction: column;
	padding: 20upx;
}

.title {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 20px;
}

.resume-box {
	.resume-title {
		min-width: 100px;
		font-size: 15px;
	}

	.form-cnt {
		width: calc(100% - 150px);

	}

	.radio {
		font-size: 15px;
	}

	.form-cnt1 {
		width: calc(100% - 80upx);
	}

	.resume-input {
		width: calc(100% - 100px);

		input {
			width: 100%;
			height: 50upx;
			line-height: 50upx;
		}
	}
}

.bottom {
	padding-bottom: calc(constant(safe-area-inset-bottom) + 22upx);
	/*兼容 IOS<11.2*/
	padding-bottom: calc(env(safe-area-inset-bottom) + 22upx);
	/*兼容 IOS>11.2*/
}

.color-0d0 {
	color: #0D0D12;
}

::v-deep .u-picker__view {
	pointer-events: auto !important;
	z-index: 10075 !important;
}
</style>